<template>
    <div class="header-box common-shadow flex-between-items-box bg-white px-20 fixed top-0 right-0 z-10">
        <div class="text-20 font-500">Member Data Visualization System</div>
        <!-- 右侧管理员名称和头像 -->
        <div class="flex-end-box">
            <!-- 管理员名称 -->
            <template v-if="systemInfo">
                <div class="flex-col-box justify-around">
                    <span class="text-t-default text-16 font-500">{{ systemInfo.adminName }}</span>
                    <span class="mt-4 text-12 text-t-secondary">管理员</span>
                </div>
            </template>
            <div class="avatar ml-14 rounded-full flex-center-box cursor-pointer border-t-border border-solid">
                <!-- 头像弹窗 -->
                <el-popover
                    trigger="click"
                    placement="bottom"
                    popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 0px;"
                >
                    <!-- 头像 -->
                    <template #reference v-if="systemInfo">
                        <el-avatar :src="systemInfo.adminImgUrl" />
                    </template>
                    <!-- 悬浮按钮 -->
                    <template #default>
                        <el-button
                            type="info"
                            text
                            @click="$emit('openOperation')"
                            size="large"
                        >
                            系统操作
                            <Icon class="ml-36 text-t-secondary" :size="16" name="Setting"/>
                        </el-button>
                        <el-button
                            type="info"
                            text
                            @click="exitSystem"
                            size="large"
                        >
                            退出系统
                            <Icon class="ml-36 text-t-secondary" :size="16" name="SwitchButton"/>
                        </el-button>
                    </template>
                </el-popover>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { GlobalMitt, Storage } from '@utils/methods'
import { SystemInfo } from '@api/module/system'
import Icon from '@components/Icon/index.vue'

const router = useRouter()

// 打开系统操作
defineEmits(['openOperation'])

// 系统信息
const systemInfo = ref<SystemInfo | null>(null)

/**
 * 刷新 systemInfo 信息
 * */
const refreshSystemInfo = () => {
    systemInfo.value = Storage.get('systemInfo')
}

GlobalMitt.on('refreshSystemInfo', refreshSystemInfo)

refreshSystemInfo()
/**
 * 退出系统
 * */
const exitSystem = () => {
    Storage.clear()
    router.push('/login')
}
</script>

<style lang="less" scoped>
.header-box{
    width: calc(100% - 250px);
    height: 70px;

    .avatar{
        width: 46px;
        height: 46px;
        border-width: 2px;
    }
}
.el-popper{
    .el-button{
        margin-left: 0 !important;
    }
}

</style>
